<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      v-if="open"
      :width="dialogWidth"
      :before-close="handleDialogClose"
      destroy-on-close
    >
      <imgPreview
        v-if="type == 1"
        :url="filePath + fileInfo.attachpath"
        :width="fileInfo.attachwidth"
        :height="fileInfo.attachheight"
      />
      <audioPreview
        v-if="type == 2"
        :audioUrl="filePath + fileInfo.attachpath"
        :fileName="fileInfo.attachname"
        :seekTime="seekTime"
        @onAudioPlay="handleMediaPlay"
        ref="audioPreview"
      />
      <videoPreview
        v-if="type == 3"
        :videoUrl="filePath + fileInfo.attachpath"
        @onVideoPlay="handleMediaPlay"
        :seekTime="seekTime"
        ref="videoPreview"
      />
      <docPreview v-if="type == 4" :url="filePath + fileInfo.attachpath" />
      <excelPreview v-if="type == 5" :url="filePath + fileInfo.attachpath" />
      <pdfPreview v-if="type == 6" :url="filePath + fileInfo.attachpath" />
    </el-dialog>
  </div>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import { getAttachFileCategory } from "@/utils/ruoyi";
import imgPreview from "./imgPreview.vue";
import videoPreview from "./videoPreview.vue";
import docPreview from "./docPreview.vue";
import excelPreview from "./excelPreview.vue";
import pdfPreview from "./pdfPreview.vue";
import audioPreview from "./audioPreview.vue";

export default {
  name: "AttachViewer",
  mixins: [dialogMixin],
  components: {
    imgPreview,
    videoPreview,
    docPreview,
    excelPreview,
    pdfPreview,
    audioPreview,
  },
  data() {
    return {
      title: "文件预览",
      type: 0,
      fileInfo: null,
      filePath: process.env.VUE_APP_BASE_API + "/profile",
      startTime: 0,
      mediaCurTime: 0,
      materialId: 0,
      seekTime: 0,
    };
  },
  computed: {
    dialogWidth() {
      switch (this.type) {
        case 5:
          return "70%";
        case 6:
          return "50%";
        default:
          return "700px";
      }
    },
  },
  mounted() {},
  methods: {
    getAttachFileCategory,
    show(file, materialId, seekTime) {
      const moment = require("moment");
      this.type = this.getAttachFileCategory(file.attachtype);
      this.fileInfo = file;
      this.title = file.attachname;
      this.materialId = materialId;
      this.seekTime = seekTime;
      this.startTime = 0;
      this.mediaCurTime = 0;
      // 根据类型决定是否设置开始时间
      if (![2, 3].includes(this.type)) {
        // 其他类型资料开启弹窗就计时
        this.startTime = moment().unix();
      }
      this.open = true;
    },
    handleDialogClose(done) {
      if (this.startTime == 0) {
        // 这种情况属于视频没有开始播放就直接关闭，就不需要上报了
        done();
        return false;
      }
      const moment = require("moment");
      // 关闭窗口，获取查看时长
      let duration = moment().unix() - this.startTime; // 时长（秒）
      if (this.type == 3) {
        // 视频文件获取当前播放位置
        this.mediaCurTime = this.$refs.videoPreview.getMediaCurrentTime();
      }
      if (this.type == 2) {
        // 音频文件获取当前播放位置
        this.mediaCurTime = this.$refs.audioPreview.getMediaCurrentTime();
      }
      // 调用接口上报时间
      this.$emit("onViewerClose", this.materialId, duration, this.mediaCurTime);
      console.log(
        `查看时长：${duration}秒，媒体当前位置：${this.mediaCurTime}`
      );
      done();
    },
    handleMediaPlay() {
      // 视频或者音频文件，开始播放时计时
      const moment = require("moment");
      this.startTime = moment().unix();
    },
  },
};
</script>
<style scoped>
#vs {
  width: 300px;
  height: 200px;
}
</style>
